<template>
  <view>
    <view :style="{'height':`${iphoneBottom}px`}"></view>
    <view class="dev-iphone-bottom" :style="{'background':bgColor,'z-index':zIndex}">
      <slot></slot>
      <view :style="{'height':`${iphoneBottom}px`}"></view>
    </view>
  </view>
</template>

<script>
  export default {
    name: "dev-iphone-bottom",
    props: {
      //背景颜色
      bgColor: {
        type: String,
        default: '#fff'
      },
      zIndex: {
        type: [String, Number],
        default: 999
      }
    },
    data() {
      return {
        iphoneBottom: global.iphoneBottom, //底部高度
      };
    },
    created() {
      if (!global.iphoneBottom && global.iphoneBottom !== 0) {
        this.getSystemInfo(); //获取手机系统信息
      }
    },
    methods: {
      //获取手机系统信息
      getSystemInfo() {
        let _this = this;
        uni.getSystemInfo({
          success: function(res) {
            if (res.model === 'iPhone X' || 'iPhone XR' || 'iPhone XS Max' ||
              'iPhone 11' || 'iPhone 11 Pro' || 'iPhone 11 mini' ||
              'iPhone 11 Pro Max' || 'iPhone 12' || 'iPhone 12 mini' || 'iPhone 12 Pro' ||
              'iPhone 12 Pro Max' || 'iPhone 13' || 'iPhone 13 mini' || 'iPhone 13 Pro' ||
              'iPhone 13 Pro Max' || 'iPhone 14' || 'iPhone 14 mini' || 'iPhone 14 Pro' ||
              'iPhone 14 Pro Max'){
              console.log(res.model, '机型')
              console.log(res.screenHeight - res.safeArea.bottom, '黑边高度')
              _this.iphoneBottom = global.iphoneBottom = res.screenHeight - res.safeArea.bottom;
            } else {
              _this.iphoneBottom = global.iphoneBottom = 0;
            }

          }
        });
      },
    }
  }
</script>

<style lang="scss">
  .dev-iphone-bottom {
    width: 750rpx;
    position: fixed;
    bottom: 0;
  }
</style>
